<template>
  <div class="details">
    <div class="header">
      <span>项目名称</span>
      <span>【项目编号】</span>
      <span class="priority">优先级</span>
    </div>
    <div class="message">
      <div>
        <i class="el-icon-time">项目周期：</i>
        <span class="time"> 2019.10.31-2020.0.30</span><!--项目周期 -->
      </div>
      <div>
        <i class="el-icon-user">创建人：</i>
        <span>曹宏</span>
      </div>
      <div>
        <i class="el-icon-user">当前负责人：</i>
        <span>曹宏</span>
      </div>
    </div>
    <div class="container">
      <div class="progress">
        <div class="progress_title">
          项目进度条
        </div>
        <div class="progress_content">
          <el-row>
            <el-col :span="3">新建项目</el-col>
            <el-col :span="3">虚拟项目</el-col>
            <el-col :span="3">正式立项</el-col>
            <el-col :span="3">开发完结</el-col>
            <el-col :span="3">正式交付</el-col>
            <el-col :span="3">正式完结</el-col>
          </el-row>
          <el-row class="centerElRow">
            <el-col :span="3" class="center"><div class="xianLeft" style="visibility:hidden;"></div><div class="dian"></div><div class="xianRight"></div></el-col>
            <el-col :span="3" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
            <el-col :span="3" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
            <el-col :span="3" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
            <el-col :span="3" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
            <el-col :span="3" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight" style="visibility:hidden;"></div></el-col>
          </el-row>
        </div>
      </div>
      <div class="statusBox">
        <div class="status_title">
          项目状态
        </div>
        <div class="status_content">
          <div v-for="(item, index) in statusData" :key="index">
            {{item}}
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="estimate">
          预估/实际人天：-/-人天
        </div>
        <div class="practical">
          项目投入总人天：-人天
        </div>
      </div>
      <div class="progressMessage">
        <div class="progressMessage_title">
          项目研发进度：
        </div>
        <div class="progressMessage_content">
          暂无进度显示
        </div>
      </div>
    </div>
    <div class="footer">
      等待流转人分配中……
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        statusData:['如期正常','项目延期','严重延期','项目超前','大幅超前','暂无进度']
      }
    },
  }
</script>

<style lang="scss" scoped>



.details{
  font-size: 14px;
  color: #7f7f7f;
  .header{
    margin: 10px 0px;
    .priority{
      padding: 2px 5px;
      background: #d7d7d7;
    }
  }
  .message{
    width: 98%;
    padding: 1%;
    border: 1px solid #d7d7d7;
    display: flex;
    font-size: 14px;
    margin: 10px 0;
    div{
      padding-right: 20px;
      i::before{
        padding: 0px 10px;
      }
      .time{
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  .container{
    width: 98%;
    padding: 1%;
    border: 1px solid #d7d7d7;
    font-size: 14px;
    .progress{
      display: flex;
      align-items: center;
      .progress_content{
        flex: 1;
        text-align: center;
        color: #7f7f7f;
        .centerElRow{
          display: flex;
          // justify-content: center;
          .center{
            display: flex;
            align-items: center;
            margin: 10px 0px;
            .xianLeft{
              flex: 1;
              border: 1px solid #aaaaaa;
              background: #aaaaaa;
            }
            .dian{
              width: 11px;
              height: 11px;
              border: 1px solid #797979;
              border-radius: 50%;
              margin: 0px 10px;
            }
            .xianRight{
              flex: 1;
              border: 1px solid #aaaaaa;
              background: #aaaaaa;
            }
          }
        }
      }
    }
    .statusBox{
      .status_title{
        margin-right: 20px;
      }
      .status_content{
        display: flex;
        font-size: 13px;
        div{
          margin: 0 10px;
          padding: 3px 5px;
          background: #d7d7d7;
          color: #aaaaaa;
        }
      }
    }
    .statistics{
      width: 100%;
      margin: 20px 0;
      div{
        width: 50%;
      }
    }
    .progressMessage{
      .progressMessage_content{
        font-size: 14px;
        color: #d7d7d7;
      }
    }
  }



  .container>div{
    display: flex;
    margin: 10px 0;
  }
}
</style>
